<template>
  <div id="api-view" v-show="isShow">
    <div class="show-btn" @click="changeShow">
      <code> api.js  </code>
      <i class="el-icon-arrow-right "></i>
    </div>
    
     
    <div class="jsonviewcomponet-father">
      <jsonviewcomponet :jsondata="apiData" ></jsonviewcomponet>
    </div>  
  </div>
</template>
<script>
import JsonviewComponet from './jsonview.vue'
export default {
  name: "Apiview",
  components:{
    'jsonviewcomponet':JsonviewComponet
  },
  data () {
    return {
      isShow:false,
      apiData:this.$apis   
    };
  },
  computed:{
            
  },
  mounted(){
            
  },
  methods:{
    changeShow(){
      this.isShow = ! this.isShow
    },    
  },
}
</script>
<style lang="scss" scoped>
#api-view{
  border-left: 1px solid #d1dbe5;
  padding: 20px;
  .jsonviewcomponet-father{
    position: absolute;
    top:60px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow-y: scroll;
  }
}
.show-btn{
  margin-bottom: 20px;
  cursor: pointer;
}

</style>